<template>
  <div class="w1200 review_page">
    <!-- 面包屑 开始 -->
    <div class="breadcrumb">
      <el-breadcrumb
        class="el_breadcrumb"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          $cookies.get("city") || "全国"
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>医院</el-breadcrumb-item>
        <el-breadcrumb-item>{{ hospital.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>写评论</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑 end -->

    <!-- 内容 开始 -->
    <layout-box class="mt20 mb20">
      <template slot="left">
        <!-- 医院信息 开始 -->
        <div class="hosp_info">
          <h2 class="h2">
            <span>{{ hospital.name }}</span>
            <img src="@/assets/images/rz.png" class="rz" alt="" />
          </h2>

          <!-- 标签、评分、评价 开始 -->
          <div class="label_score">
            <div
              class="labels_list"
              v-if="
                hospital.featuredLabels && hospital.featuredLabels.length > 0
              "
            >
              <template v-for="(item, index) in hospital.featuredLabels || []">
                <div
                  class="label"
                  :class="getClassName(index)"
                  :key="`label_${index}`"
                  v-if="index < 3"
                >
                  {{ item.name }}
                </div>
              </template>
            </div>

            <div class="score_box">
              <div class="score">
                <el-rate
                  v-model="hospital.initScore"
                  class="li_rate"
                  disabled
                  allow-half
                ></el-rate>
              </div>
              <div class="review">{{ commentsList.length }}条评价</div>
            </div>
          </div>
          <!-- 标签、评分、评价 end -->

          <!-- 预约、点评、医生人数 开始 -->
          <div class="person_box">
            <img src="@/assets/images/smile.png" class="img" alt="" />
            <span class="num">{{ totalScore.scoreOverall }}</span>
            <span class="line">/</span>
            <span>医生人数</span>
            <span class="num">{{ doctorList.length }}</span>
            <span class="line">/</span>
            <span>预约人数</span>
            <span class="num">{{ hospital.initAppointmentCnt }}</span>
            <span class="line">/</span>
            <span>点评人数</span>
            <span class="num">{{ commentsList.length }}</span>
          </div>
          <!-- 预约、点评、医生人数 end -->

          <!-- 更多信息 开始 -->
          <div class="more_info">
            <div class="cell">
              <span class="name">营业时间</span>
              <div class="txt" :title="hospital.businessTime">
                {{ hospital.businessTime }}
              </div>
            </div>
            <div class="cell">
              <span class="name">所在位置</span>
              <div class="txt">
                {{ hospital.provinceName }}{{ hospital.cityName
                }}{{ hospital.districtName }}{{ hospital.address }}
              </div>
            </div>
          </div>
          <!-- 更多信息 end -->
        </div>
        <!-- 医院信息 end -->

        <!-- 点评 开始 -->
        <div class="review_box mt20">
          <h2 class="h2">我要点评</h2>
          <el-form
            ref="form"
            :model="form"
            :rules="formRules"
            class="el_form_box"
            label-width="100px"
          >
            <el-form-item
              label="总体"
              class="rate_form_item total_form_item"
              prop="scoreOverall"
            >
              <div class="rate_box">
                <el-rate
                  v-model="form.scoreOverall"
                  class="el_rate rate"
                  :allow-half="allowHalf"
                ></el-rate>
                <img :src="getImages(form.scoreOverall)" class="face" alt="" />
              </div>
            </el-form-item>
            <el-form-item
              label="专业"
              class="rate_form_item"
              prop="scoreProfessional"
            >
              <div class="rate_box">
                <el-rate
                  v-model="form.scoreProfessional"
                  class="li_rate rate"
                  :allow-half="allowHalf"
                ></el-rate>
                <img
                  :src="getImages(form.scoreProfessional)"
                  class="face"
                  alt=""
                />
              </div>
            </el-form-item>
            <el-form-item
              label="服务"
              class="rate_form_item"
              prop="scoreService"
            >
              <div class="rate_box">
                <el-rate
                  v-model="form.scoreService"
                  class="li_rate rate"
                  :allow-half="allowHalf"
                ></el-rate>
                <img :src="getImages(form.scoreService)" class="face" alt="" />
              </div>
            </el-form-item>
            <el-form-item
              label="环境"
              class="rate_form_item"
              prop="scoreSurroundings"
            >
              <div class="rate_box">
                <el-rate
                  v-model="form.scoreSurroundings"
                  class="li_rate rate"
                  :allow-half="allowHalf"
                ></el-rate>
                <img
                  :src="getImages(form.scoreSurroundings)"
                  class="face"
                  alt=""
                />
              </div>
            </el-form-item>
            <el-form-item label="评论">
              <el-input
                type="textarea"
                v-model.trim="form.content"
                placeholder="请输入您想评价的内容"
                class="a_area"
                rows="5"
                resize="none"
              />
            </el-form-item>
            <el-form-item label="图片">
              <ImageUpload v-model="form.commentPics" :limit="3">
                <div slot="inner" class="upload_inner">
                  <img
                    src="@/assets/images/hospital/camera.png"
                    class="img"
                    alt=""
                  />
                  <span>上传图片</span>
                </div>
              </ImageUpload>
            </el-form-item>
            <el-form-item label="选填信息">
              <ImageUpload v-model="form.voucherPics" :limit="3">
                <div slot="inner" class="upload_inner">
                  <img
                    src="@/assets/images/hospital/camera.png"
                    class="img"
                    alt=""
                  />
                  <span>上传消费凭证</span>
                </div>
              </ImageUpload>
            </el-form-item>
            <el-form-item label="关联医生">
              <el-select v-model="form.doctorId" class="a_select">
                <el-option
                  v-for="(item, index) in doctorList"
                  :key="`doctor_${index}`"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关联商品">
              <el-select v-model="form.goodsId" class="a_select">
                <el-option
                  v-for="(item, index) in goodsList"
                  :key="`goods_${index}`"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-button
                type="primary"
                class="submit_btn"
                :loading="loading"
                @click="checkParams"
                >发布评论</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <!-- 点评 end -->
      </template>
      <template slot="right">
        <!-- 附近医院 开始 -->
        <div class="problem_box">
          <div class="head">附近医院</div>
          <div class="list_box">
            <Hospital
              v-for="(item, index) in hospitalList"
              :key="`hospital_${index}`"
              :info="item"
            />
          </div>
        </div>
        <!-- 附近医院 end -->
      </template>
    </layout-box>
    <!-- 内容 end -->
  </div>
</template>
<script>
import {
  Rate,
  Form,
  FormItem,
  Input,
  Upload,
  Select,
  Option,
} from "element-ui";
import ImageUpload from "@/components/upload/index.vue";
import {
  PLATFORM_TYPE,
  GET_HOSPITAL_INFO,
  GET_HOSPITAL_GOODS,
  GET_HOSPITAL_DOCTORS,
  GET_HOSPITAL_USERCASES,
  GET_HOSPITAL_USERCOMMENTS,
  FOLLOWED_HOSPITAL_INFO,
  GET_QUESTIONANSWER_SEARCH,
  GET_HOSPITAL_SEARCH,
  SAVE_COMMENT_INFO,
} from "@/http/interface";
import { showToast, deepClone } from "@/utils/utils";
export default {
  components: {
    [Rate.name]: Rate,
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Input.name]: Input,
    [Upload.name]: Upload,
    [Select.name]: Select,
    [Option.name]: Option,
    ImageUpload,
  },
  data() {
    return {
      oInfo: {},
      hospital: {},
      hospitalId: "",
      commentsList: [],
      doctorList: [],
      goodsList: [],
      hospitalList: [],
      totalScore: {},
      form: {
        scoreOverall: 5,
        scoreProfessional: 5,
        scoreService: 5,
        scoreSurroundings: 5,
      },
      formRules: {
        scoreOverall: [
          { required: true, message: "请选择总体评分", trigger: "change" },
        ],
        scoreProfessional: [
          { required: true, message: "请选择专业评分", trigger: "change" },
        ],
        scoreService: [
          { required: true, message: "请选择服务评分", trigger: "change" },
        ],
        scoreSurroundings: [
          { required: true, message: "请选择环境评分", trigger: "change" },
        ],
      },
      loading: false,
      allowHalf: false,
    };
  },
  head() {
    return {
      link: [{ ref: "canonical", href: `${this.$domain}/review` }],
    };
  },
  async asyncData({ query, $axios }) {
    let params = { id: query.id };
    let res = await $axios.get(GET_HOSPITAL_INFO, {
      params: params,
    });
    let oInfo = res.data || {};

    // 医生团队
    let des = await $axios.get(GET_HOSPITAL_DOCTORS, { params: params });
    let doctorList = des.data || [];

    // 用户评价
    let comes = await $axios.get(GET_HOSPITAL_USERCOMMENTS, { params, params });
    let obj = comes.data || {};
    let commentsList = obj.list || [];
    let totalScore = obj.summary || {};

    // 商品信息
    let ges = await $axios.get(GET_HOSPITAL_GOODS, { params: params });
    console.log(ges);
    let goodsList = ges.data || [];

    // 医院列表
    let qes = await $axios.get(GET_HOSPITAL_SEARCH, {
      params: { pageNumber: 1, pageSize: 4 },
    });
    let qbj = qes.data || {};
    let hospitalList = qbj.list || [];

    return {
      oInfo,
      hospital: oInfo.hospital,
      doctorList,
      commentsList,
      goodsList,
      totalScore,
      hospitalId: query.id,
      hospitalList,
    };
  },
  methods: {
    // 动态获取className
    getClassName(index) {
      if (index % 3 == 0) {
        return "";
      }
      if (index % 3 == 1) {
        return "blue";
      }
      if (index % 3 == 2) {
        return "dark_blue";
      }
    },

    // 根据分值展示表情
    getImages(score) {
      let num = Number(score);
      let url = "face_very_poor.png";

      if (num <= 2) {
        url = "face_very_poor.png";
      }

      if (num > 2 && num <= 3) {
        url = "face_normal.png";
      }

      if (num > 3 && num <= 4) {
        url = "face_better.png";
      }

      if (num > 4 && num <= 5) {
        url = "face_very_good.png";
      }

      let _path = require("@/assets/images/hospital/" + url);
      return _path;
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.form);
    },

    // 发表评论
    checkParams() {
      let _this = this;
      _this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        _this.saveReview();
      });
    },

    // 发表评论
    async saveReview() {
      let params = deepClone(this.form);
      params.hospitalId = this.hospitalId;
      params.platform = PLATFORM_TYPE;
      this.loading = true;
      if (!this.hospitalId) {
        return false;
      }
      let res = await this.$axios.post(SAVE_COMMENT_INFO, params);
      this.loading = false;
      if (res.code == 200) {
        showToast({
          message: "发布成功，请等待审核！",
          type: "success",
        });
        this.$router.go("-1");
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/hospital/review.less";
</style>